<!--
 * @Author: 隔壁小王 18398748175@163.com
 * @Date: 2024-01-02 14:19:30
 * @LastEditors: 隔壁小王 18398748175@163.com
 * @LastEditTime: 2024-01-03 11:41:51
 * @FilePath: \web-dist\vue-web-demo\src\views\MapEcharts\Mapecharts1\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="mapbox">
    <div class="leftbox" ref="mapbox"></div>
    <div class="rightbox">
      <box />
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import chengde from "./cd.json";
import getdata from "./map.js";
import box from "./components/box.vue";
export default {
  data() {
    return {
      myChart: null,
      time: null,
    };
  },
  provide() {
    return {
      name: "父组件传值",
      txet: "inject",
    };
  },
  components: {
    box,
  },
  methods: {
    setMap() {
      this.$echarts.registerMap("CD", chengde);
      this.myChart = this.$echarts.init(this.$refs.mapbox);
      this.myChart.setOption(getdata());
      this.myChart.on("click", (e) => {
        if (e.data instanceof Array) {
          console.log(45, e);
          console.log("if");
        } else {
          this.myChart.dispatchAction({
            type: "hideTip",
          });
          this.myChart.setOption(getdata());
        }
      });
      window.addEventListener("resize", () => {
        clearInterval(this.time);
        this.time = setTimeout(() => {
          this.myChart.resize();
        }, 100);
      });
    },
  },
  mounted() {
    this.setMap();
  },
};
</script>

<style lang='scss' scoped>
.mapbox {
  width: 100%;
  height: 100%;
  background: #000;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  .leftbox {
    flex: 3;
    border: 1px solid gold;
  }
  .rightbox {
    flex: 1;
    border: 1px solid rgb(60, 25, 218);
  }
}
::v-deep .tooltip-box {
  // border: 1px solid red;
  padding: 10px;
  background-image: url("@/assets/bg.png");
  background-size: 100% 100%;
}
</style>